<template>
	<view class="like">

		<view class="bokm">
			<Top :title='title' :white='true'></Top>
			<view class="taoxi">
				<view class="btn_box">
					<view class="btn" :class="{check:numb==1}" @click="change(1)">
						价格排序
						<image class="icon" v-if="numb!=1" src="../../static/teacher/t1.png"></image>
						<image class="icon" v-if="numb==1" src="../../static/teacher/t1s.png"></image>
					</view>
					<view class="btn" :class="{check:numb==2}" @click="change(2)">
						最新上架
						<image class="icon" v-if="numb!=2" src="../../static/teacher/t2.png"></image>
						<image class="icon" v-if="numb==2" src="../../static/teacher/t2s.png"></image>
					</view>
					<view class="btn" :class="{check:numb==3}" @click="change(3)">
						人气爆款
						<image class="icon" v-if="numb!=3" style="width:21upx;height:24upx;"
							src="../../static/teacher/t3.png"></image>
						<image class="icon" v-if="numb==3" style="width:21upx;height:24upx;"
							src="../../static/teacher/t3s.png"></image>
					</view>
					<view class="btn" :class="{check:numb==4}" @click="change(4)">
						评分最高
						<image class="icon" v-if="numb!=4" style="width:24upx;height:23upx;"
							src="../../static/teacher/t4.png"></image>
						<image class="icon" v-if="numb==4" style="width:24upx;height:23upx;"
							src="../../static/teacher/t4s.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="dankm" style="margin-top: 14rpx;" v-for="(item,i) in list" :key="i">
			<view class="dan_box" @click="goDetails(item.id)">
				<view class="danl">
					<view class="" style="width: 48upx;height: 48upx;border-radius: 50%;margin-top: 86upx;margin-right: 24upx;" :style="item.saleType==2?'background: #999;':''">
						<view :class="xuan==item.id?'cancle':'quan'" @click.stop="cancle(item,i)"></view>
					</view>
					<image class="dimg" :src="item.image_src"></image>
				</view>
				<view class="danr">
					<view class="dh">#{{shopname}}</view>
					<view class="title">{{item.name}}</view>
					<view class="jia">
						<view class="xm">￥</view>
						{{item.price||''}}
						<view class="yuan">￥{{item.scribing_price||''}}</view>
					</view>
					<view class="fuwu">
						服务费 摄影师：¥{{item.s_price||''}} | 化妆师：￥{{item.z_price||''}}
					</view>
				</view>
			</view>
		</view>
		<view class="qued" @click="goNest">下一步</view>
	</view>
</template>

<script>
	import Top from '../../components/navBox/top.vue'
	export default {
		data() {
			return {
				title: '选择套系',
				numb: 1,
				shopname: '',
				list: [],
				xuan: 0, //套系id
				dressList: {},
				obj: '',
				page: 1,
				lastPage: 0,
				sorts:1,//1升序 2降序
				currentTime:0,
			}
		},
		components: {
			Top
		},
		computed: {

		},
		onLoad(options) {
			this.shopname = this.$store.state.shopsname.shopname;
			this.obj = JSON.parse(options.obj); 
			// 获取当前时间
			let date = new Date().getTime()
			let number = date / 1000
			this.currentTime = number.toFixed(0)
		},
		onShow() {
			if(uni.getStorageSync('yuyueid')){
				// 删除预约
				this.$request({
					url: 'wedding/sys_appointment_del',
					method: 'POST',
					data: {
						id:uni.getStorageSync('yuyueid')
					},
				}).then(res=>{
					uni.removeStorageSync('yuyueid');
				})
			}
		},
		mounted() {
			this.getsystem()
		},
		onReachBottom() {
			if (this.page >= this.lastPage) {
				this.$wanlshop.msg('我是有底线的!')
			} else {
				this.page++;
				this.getsystem();
			}
		},
		methods: {
			//跳转套系详情
			goDetails(e){
				let objs = {
					type_id: this.obj.type_id,
					type_names:this.obj.type_names,
				}
				uni.navigateTo({
					url: '/pages/filePages/goodsDetail/goodsDetail?id=' + e + '&type=' + 1+'&obj='+JSON.stringify(objs)+'&app='+JSON.stringify(this.obj)
				})
			},
			// 套系列表
			getsystem() {
				let obj = {
					...this.obj,
					order: this.numb == 1 ? 'price' : this.numb == 2 ? 'id' : this.numb == 3 ? 'views' : this.numb ==
						4 ? 'sales' : '',
					sort: this.sorts == 1 ? 'asc' : this.sorts == 2 ? 'desc' : '',
					page: this.page
				};
				obj.times = obj.times=="不指定"?'':obj.times;
				obj.worker_z_id = obj.worker_z_id?obj.worker_z_id:0;
				obj.worker_s_id = obj.worker_s_id?obj.worker_s_id:0;
				obj.worker_s_name = obj.worker_s_name=="不指定"?'':obj.worker_s_name;
				obj.worker_z_name = obj.worker_z_name=="不指定"?'':obj.worker_z_name;
				this.$request({
					url: 'wedding/worker_appointment_sys',
					method: 'POST',
					data: obj
				}).then(res => {
					let list = res.data.data.data;
					for (let i = 0; i < list.length; i++) {
						list[i].saleType = 1;//可以购买
						if (list[i].endtime != 0) {
							if (Number(this.currentTime) > list[i].endtime) {
								list[i].saleType = 2;//不可以购买
							} else if (Number(this.currentTime) < list[i].starttime) {
								list[i].saleType = 2;//不可以购买
							}
						}
					}
					if (this.page == 1) {
						this.list = list;
					} else {
						this.list.push(...list);
					}
					this.lastPage = res.data.data.last_page;
				})
			},
			//选择套系
			cancle(e, i) {
				if(e.saleType==2){
					return;
				}
				this.xuan = e.id;
				this.price = e.price;
				this.obj.z_price = e.z_price;
				this.obj.s_price = e.s_price;
				this.obj.taoxiId = this.xuan;
				this.getsam();
			},
			// 切换tanbar
			change(e) {
				if (this.numb == e) {
					if (this.sorts == 1) {
						this.sorts = 2;
					} else {
						this.sorts = 1;
					}
				} else {
					this.sorts = 1;
				}
				this.numb = e;
				this.page = 1;
				this.getsystem();
			},
			getsam() {
				this.$request({
					url: 'package/sample',
					data: {
						id: this.xuan
					}
				}).then(res => {
					this.dressList = res.data.data;
				})
			},
			// 点击下一步
			goNest() {
				if(this.xuan==0){
					uni.showToast({
						title:'请选择套系',
						icon:'none'
					})
					return
				}
				let goodsData = {
					shop_id: this.dressList.shop_id,
					package_id: this.dressList.id,
					spec: [],
					obj:this.obj
				}
				this.dressList.attrs_list.forEach((item, index) => {
					item.value.forEach(items => {
						if (items.is_default == 1) {
							goodsData.spec.push({
								id: items.id,
								number: items.number
							})
						}
					})
				})
				uni.navigateTo({
					url: `/pages/order/order?data=${JSON.stringify(goodsData)}&flag=${1}&price=${this.price}`
				})
			},
		}
	}
</script>
<style>
	page {
		background: #F4F4F4;
	}
</style>
<style scoped lang="scss">
	.bokm {
		width: 100%;
		background: #fff;

		.taoxi {
			background: #fff;
			width: 100%;

			.btn_box {
				height: 78upx;
				width: 680upx;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;

				.btn {
					font-size: 26upx;
					color: #999;
					line-height: 78upx;

					&.check {
						color: #333;
					}

					.icon {
						width: 32upx;
						height: 32upx;
						display: inline-block;
						vertical-align: middle;
						margin-top: -4upx;
						margin-left: 6upx;
					}
				}
			}
		}
	}


	.dankm {
		width: 100%;
		background: #fff;
		padding-top: 18upx;
		padding-bottom: 32upx;

		.dan_box {
			width: 686upx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;

			.danl {
				display: flex;

				.quan {
					width: 48upx;
					height: 48upx;
					background: url(../../static/teacher/q.png)no-repeat center;
					background-size: 100%;
					// margin-top: 86upx;
					// margin-right: 24upx;

				}

				.cancle {
					width: 48upx;
					height: 48upx;
					// margin-top: 86upx;
					// margin-right: 24upx;
					background: url(../../static/teacher/qx.png)no-repeat center;
					background-size: 100%;
				}

				.dimg {
					width: 204upx;
					height: 204upx;
					border-radius: 8upx;
				}
			}

			.danr {
				width: 400upx;

				.dh {
					color: #E7B77D;
					font-size: 24upx;
					margin-top: 8upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.title {
					color: #333;
					font-size: 28upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-top: 12upx;
					font-weight: 550;
				}

				.jia {
					color: #FF3F4A;
					font-size: 44upx;
					margin-top: 12upx;

					.xm {
						font-size: 24upx;
						display: inline-block;
					}

					.yuan {
						text-decoration: line-through;
						color: #999999;
						font-size: 24upx;
						display: inline-block;
						margin-left: 12upx;
					}
				}

				.fuwu {
					margin-top: 8upx;
					color: #666666;
					font-size: 22upx;
				}
			}
		}
	}


	.qued {
		position: fixed;
		width: 686upx;
		height: 80upx;
		background: #111111;
		border-radius: 40upx;
		color: #fff;
		font-size: 28upx;
		bottom: 10upx;
		left: 50%;
		margin-left: -343upx;
		text-align: center;
		line-height: 80upx;
	}
</style>
